import React, { useEffect, useState } from "react";
import styles from "./Home.module.css";

import { BarsOutlined } from "@ant-design/icons";

import { Descriptions } from "antd";

import axios from "../../http/index";

import { useNavigate } from "react-router-dom";

const Index = () => {
  const [list, setList] = useState({});
  const [serveList, setServeList] = useState({});

  const navigate = useNavigate();
  // 加载页面获取数据
  useEffect(() => {
    axios({
      url: "/home/getList",
      method: "GET",
    })
      .then((res) => {
        if (res.data.code === "200") {
          setList(res.data.data);
          setServeList(res.data.data.surveInfo);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);

  // 金额处理 三位加，保留两位小数
  const formateMoney = (s, n) => {
    n = n > 0 && n <= 20 ? n : 2;
    s = parseFloat((s + "").replace(/[^\d-]/g, "")).toFixed(n) + "";
    var l = s.split(".")[0].split("").reverse(),
      r = s.split(".")[1],
      t = "";
    for (let i = 0; i < l.length; i++) {
      t += l[i] + ((i + 1) % 3 === 0 && i + 1 !== l.length ? "," : "");
    }
    return t.split("").reverse().join("") + "." + r;
  };

  // 数字处理 三位加，
  const formateNum = (num = 0) => {
    return num.toString().replace(/\d+/, function (n) {
      return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
    });
  };

  const toCustom = () => {
    navigate("/customer/management");
  };

  const toOrder = () => {
    navigate("/order/list");
  };

  const toProcurement = () => {
    navigate("/procurement/list");
  };

  const toEmail = () => {
    navigate("/other/email");
  };

  // console.log(a.system);
  // console.log(list.surveInfo.time);

  return (
    <div className={styles.home}>
      <div className={styles.home_card}>
        <div className={styles.card_top}>
          <BarsOutlined />
          <span>数据分析</span>
        </div>
        <div className={styles.card_content}>
          <div className={styles.content_box}>
            <div className={styles.box_small}>
              <span className={styles.keys}>销售额</span>
              <span className={styles.key_values}>
                {formateMoney(list.salesVolume)}
              </span>
            </div>
            <div className={styles.box_small}>
              <span className={styles.keys}>采购额</span>
              <span className={styles.key_values}>
                {formateMoney(list.amountOfPurchase)}
              </span>
            </div>
          </div>
          <div className={styles.content_box}>
            <div className={styles.box_small}>
              <span className={styles.keys}>今日新增客户数</span>
              <span className={styles.key_values}>
                {formateNum(list.today)}
              </span>
            </div>
          </div>
          <div className={styles.content_box}>
            <div className={styles.box_small}>
              <span className={styles.keys}>累积增客户数</span>
              <span className={styles.key_values}>
                {formateNum(list.customer)}
              </span>
            </div>
            <div className={styles.box_small}>
              <span className={styles.keys}>跟进次数</span>
              <span className={styles.key_values}>
                {formateNum(list.follow)}
              </span>
            </div>
          </div>
          <div className={styles.content_box}>
            <div className={styles.box_small}>
              <span className={styles.keys}>库存量</span>
              <span className={styles.key_values}>
                {formateNum(list.inventory)}
              </span>
            </div>
            <div className={styles.box_small}>
              <span className={styles.keys}>库存预警</span>
              <span className={styles.key_values}>
                {formateNum(list.warning)}
              </span>
            </div>
          </div>
          <div className={styles.content_box}>
            <div className={styles.box_small}>
              <span className={styles.keys}>销售目标</span>
              <span className={styles.key_values}>
                {formateMoney(list.goal)}
              </span>
            </div>
            <div className={styles.box_small}>
              <span className={styles.keys}>完成销售目标</span>
              <span className={styles.key_values}>
                {formateMoney(list.finish)}
              </span>
            </div>
          </div>
        </div>
      </div>
      <hr className={styles.hr} />
      <div className={styles.home_card}>
        <div className={styles.card_top}>
          <BarsOutlined />
          <span>快捷导航</span>
        </div>
        <div className={styles.card_content}>
          <div className={styles.content_btn} onClick={toCustom}>
            客户管理
          </div>
          <div className={styles.content_btn} onClick={toOrder}>
            订单管理
          </div>
          <div className={styles.content_btn} onClick={toCustom}>
            会员管理
          </div>
          <div className={styles.content_btn} onClick={toProcurement}>
            采购管理
          </div>
          <div className={styles.content_btn} onClick={toEmail}>
            <span className={styles.red}>未读邮件(100+)</span>
          </div>
        </div>
      </div>
      <hr className={styles.hr} />
      <div className={styles.home_card}>
        <div className={styles.card_top}>
          <BarsOutlined />
          <span>服务器信息</span>
        </div>
        <Descriptions bordered column={2}>
          <Descriptions.Item
            label="服务器系统："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.system}
          </Descriptions.Item>
          <Descriptions.Item
            label="网站域名/IP："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.ip}
          </Descriptions.Item>
          <Descriptions.Item
            label="服务器环境："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.environment}
          </Descriptions.Item>
          <Descriptions.Item
            label="PHP 版本："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.PHP}
          </Descriptions.Item>
          <Descriptions.Item
            label="Mysql 版本："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.sql}
          </Descriptions.Item>
          <Descriptions.Item
            label="GD 版本："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.GD}
          </Descriptions.Item>
          <Descriptions.Item
            label="文件上传限制："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.file}
          </Descriptions.Item>
          <Descriptions.Item
            label="最大占用内存："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.memory}
          </Descriptions.Item>
          <Descriptions.Item
            label="POST限制："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.post}
          </Descriptions.Item>
          <Descriptions.Item
            label="最大执行时间："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.time}
          </Descriptions.Item>
          <Descriptions.Item
            label="Zip支持："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.zip}
          </Descriptions.Item>
          <Descriptions.Item
            label="Zlib支持："
            contentStyle={{
              height: "40px",
              padding: "0",
              textAlign: "center",
              width: "30%",
              color: "#666666",
            }}
            labelStyle={{
              height: "40px",
              padding: "0",
              width: "20%",
              textAlign: "end",
              paddingRight: "30px",
              boxSizing: "border-box",
              color: "#666666",
            }}
          >
            {serveList.Zlib}
          </Descriptions.Item>
        </Descriptions>
      </div>
    </div>
  );
};

export default Index;
